import { StyleSheet } from 'react-native';
import { hexToRgba } from '@/utils/helper';
import { primaryColor, grayColor, whiteColor } from '@/constants/Colors';
import { resize } from '@/utils/resize';

export const btnSizes = {
  mini: resize(32),
  small: resize(40),
  middle: resize(48),
  large: resize(56)
}

export const textSizes = {
  mini: resize(12),
  small: resize(14),
  middle: resize(16),
  large: resize(18)
}

export const loadingSizes = {
  mini: resize(16),
  small: resize(20),
  middle: resize(24),
  large: resize(28)
}

export const linearColors = {
  // disabled
  disabled: [grayColor, grayColor],
  disabled_focus: [grayColor, grayColor],

  //ghost
  ghost: [whiteColor, whiteColor],
  ghost_focus: [whiteColor, whiteColor],

  // primary
  primary: ['#5151C6', '#888BF4'],
  primary_focus: ['#5151C6', '#5151C6'],

  //default
  default: ['#f0f0f0', '#f0f0f0'],
  default_focus: ['#ccc', '#ccc'],

  //danger
  danger: ['#ff4d4f', '#ff4d4f'],
  danger_focus: ['#ff4d4f', '#ff4d4f'],

  //text
  text: ['transparent', 'transparent'],
  text_focus: ['#f2f2f2', '#f2f2f2'],

  //link
  link: ['transparent', 'transparent'],
  link_focus: ['transparent', 'transparent'],
}

export const btnStyles = StyleSheet.create({
  btn: {
    overflow: 'hidden',
    borderWidth: 1,
  },
  btn_in: {
    flex: 1,
    paddingLeft: resize(16),
    paddingRight: resize(16),
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
  },
  center: {
    alignItems: 'center',
  },
  disabled: {
    borderColor: grayColor
  },
  default: {
    borderWidth: 0
  },
  danger: {
    borderWidth: 0
  },
  primary: {
    borderWidth: 0
  },
  text: {
    borderWidth: 0
  },
  link: {
    borderWidth: 0
  },
  ghost: {
    borderWidth: 1,
    borderColor: primaryColor
  }
});

export const textStyles = StyleSheet.create({
  btn_text: {
    fontSize: resize(14),
    fontWeight: '500'
  },
  disabled: {
    color: '#f2f2f2'
  },
  ghost: {
    color: primaryColor
  },
  default: {
    color: hexToRgba('#000000', .75)
  },
  danger: {
    color: '#fff'
  },
  primary: {
    color: '#fff'
  },
  link: {
    fontWeight: '500',
    color: primaryColor
  },
  text: {
    fontWeight: '500',
    color: hexToRgba('#000000', .9)
  }
});